<!DOCTYPE html>
<!--
  Copyright 2016 Google Inc. All rights reserved.

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

      https://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License
-->
<html class="mdl-typography">
  <head>
    <meta charset="utf-8">
    <title>MDL List Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" rel="stylesheet">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <script src="assets/material-design-lite.css.js" charset="utf-8"></script>
    <style>
      .mdl-list,
      .mdl-list-group {
        max-width: 600px;
      }

      .mdl-theme--dark {
        background: #303030;
      }

      .mdl-theme--dark > h3 {
        color: white;
      }

      .grey-bg {
        background: rgba(0, 0, 0, .26);
      }

      #icon-with-text-demo .mdl-list-item__start-detail {
        color: rgba(0, 0, 0, .54);
      }

      .mdl-theme--dark #icon-with-text-demo .mdl-list-item__start-detail {
        color: rgba(255, 255, 255, .7);
      }

      #avatar-text-icon-demo-list .mdl-list-item__end-detail {
        text-decoration: none;
        color: #ff4081; /* Pink A200 */
      }

      .two-line-avatar-text-icon-demo .mdl-list-item__start-detail {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: white;
      }

      .two-line-avatar-text-icon-demo .mdl-list-item__end-detail {
        color: rgba(0, 0, 0, .26);
        text-decoration: none;
      }

      .mdl-theme--dark .two-line-avatar-text-icon-demo .mdl-list-item__start-detail {
        background-color: rgba(255, 255, 255, .7);
        color: #303030;
      }

      .mdl-theme--dark .two-line-avatar-text-icon-demo .mdl-list-item__end-detail {
        color: rgba(255, 255, 255, .7);
      }
    </style>
  </head>
  <body>
    <main>
      <h1>MDL List</h1>
      <aside>
        <em>NOTE:</em> For the purposes of this demo, we've set a max-width of 600px on all
        <code>mdl-list</code> elements. This is not included in the base css, which has the list
        take up as much width as possible (since it's a block element).
      </aside>
      <div class="mdl-checkbox-wrapper">
        <div class="mdl-checkbox-wrapper__layout">
          <div class="mdl-checkbox">
            <input type="checkbox"
                   class="mdl-checkbox__native-control"
                   id="toggle-rtl"
                   aria-labelledby="toggle-rtl-label" />
            <div class="mdl-checkbox__background">
              <svg version="1.1" class="mdl-checkbox__checkmark"
                   xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
                   xml:space="preserve">
                <path class="mdl-checkbox__checkmark__path" fill="none" stroke="white"
                      d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
              </svg>
              <div class="mdl-checkbox__mixedmark"></div>
            </div>
          </div>
          <label for="toggle-rtl" id="toggle-rtl-label">Toggle RTL</label>
        </div>
      </div>
      <div id="demo-wrapper">
        <section>
          <h2>Single-Line List</h2>
          <section>
            <h3>Text only</h3>
            <ul class="mdl-list">
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
            </ul>
          </section>
          <section>
            <h3>Text only (dense)</h3>
            <ul class="mdl-list mdl-list--dense">
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
            </ul>
          </section>
          <section class="mdl-theme--dark">
            <h3>Text Only (dark)</h3>
            <ul class="mdl-list">
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
              <li class="mdl-list-item">Single-line item</li>
            </ul>
          </section>
          <section>
            <h3>Start Detail</h3>
            <aside><em>Note: The grey background is styled using demo placeholder styles</em></aside>
            <ul class="mdl-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
            </ul>
          </section>
          <section>
            <h3>Start Detail (dense)</h3>
            <ul class="mdl-list mdl-list--dense">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
            </ul>
          </section>
          <section>
            <h3>Start Detail Example - Icon with Text</h3>
            <ul id="icon-with-text-demo" class="mdl-list">
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  network_wifi
                </i>
                Wi-Fi
              </li>
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  bluetooth
                </i>
                Bluetooth
              </li>
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  data_usage
                </i>
                Data Usage
              </li>
            </ul>
          </section>
          <section class="mdl-theme--dark">
            <h3>Start Detail Example - Icon with Text (Dark)</h3>
            <ul id="icon-with-text-demo" class="mdl-list">
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  network_wifi
                </i>
                Wi-Fi
              </li>
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  bluetooth
                </i>
                Bluetooth
              </li>
              <li class="mdl-list-item">
                <i class="material-icons mdl-list-item__start-detail" aria-hidden="true">
                  data_usage
                </i>
                Data Usage
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar List</h3>
            <ul class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar List (dense)</h3>
            <ul class="mdl-list mdl-list--dense mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
              </li>
            </ul>
          </section>
          <section>
            <h3>Example - Avatar with Text</h3>
            <ul class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail"
                     src="/images/animal1.svg"
                     width="56" height="56" alt="Panda">
                Panda
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal2.svg"
                     width="56" height="56" alt="Sleuth"></span>
                Sleuth
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal3.svg"
                     width="56" height="56" alt="Brown Bear"></span>
                Brown Bear
              </li>
            </ul>
          </section>
          <section class="mdl-theme--dark">
            <h3>Example - Avatar with Text (Dark)</h3>
            <ul class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail"
                     src="/images/animal1.svg"
                     width="56" height="56" alt="Panda">
                Panda
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal2.svg"
                     width="56" height="56" alt="Sleuth"></span>
                Sleuth
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal3.svg"
                     width="56" height="56" alt="Brown Bear"></span>
                Brown Bear
              </li>
            </ul>
          </section>
          <section>
            <h3>End Detail</h3>
            <ul class="mdl-list">
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>End Detail (Dense)</h3>
            <ul class="mdl-list mdl-list--dense">
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar + End Detail</h3>
            <ul class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar + End Detail (Dense)</h3>
            <ul class="mdl-list mdl-list--dense mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Example - Avatar with Text and icon</h3>
            <ul id="avatar-text-icon-demo-list" class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal3.svg"
                     width="56" height="56" alt="Brown Bear"></span>
                Brown Bear
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Remove from favorites" title="Remove from favorites"
                   onclick="event.preventDefault();">
                  favorite
                </a>
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail"
                     src="/images/animal1.svg"
                     width="56" height="56" alt="Panda">
                Panda
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Add to favorites" title="Add to favorites"
                   onclick="event.preventDefault();">
                  favorite_border
                </a>
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal2.svg"
                     width="56" height="56" alt="Sleuth"></span>
                Sleuth
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Add to favorites" title="Add to favorites"
                   onclick="event.preventDefault();">
                  favorite_border
                </a>
              </li>
            </ul>
          </section>
          <section class="mdl-theme--dark">
            <h3>Example - Avatar with Text and icon (Dark)</h3>
            <ul id="avatar-text-icon-demo-list" class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal3.svg"
                     width="56" height="56" alt="Brown Bear"></span>
                Brown Bear
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Remove from favorites" title="Remove from favorites"
                   onclick="event.preventDefault();">
                  favorite
                </a>
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail"
                     src="/images/animal1.svg"
                     width="56" height="56" alt="Panda">
                Panda
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Add to favorites" title="Add to favorites"
                   onclick="event.preventDefault();">
                  favorite_border
                </a>
              </li>
              <li class="mdl-list-item">
                <img class="mdl-list-item__start-detail grey-bg"
                     src="/images/animal2.svg"
                     width="56" height="56" alt="Sleuth"></span>
                Sleuth
                <a class="mdl-list-item__end-detail material-icons" href="#"
                   aria-label="Add to favorites" title="Add to favorites"
                   onclick="event.preventDefault();">
                  favorite_border
                </a>
              </li>
            </ul>
          </section>
        </section>
        <section>
          <h2>Two-line List</h2>
          <section>
            <h3>Text-Only</h3>
            <ul class="mdl-list mdl-list--two-line">
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Text-Only (Dense)</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--dense">
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Start Detail</h3>
            <ul class="mdl-list mdl-list--two-line">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Start Detail (Dense)</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--dense">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar List</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Avatar List (dense)</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--dense mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
              </li>
            </ul>
          </section>
          <section>
            <h3>End Detail</h3>
            <ul class="mdl-list mdl-list--two-line">
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>End Detail (Dense)</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--dense">
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Two-line item</span>
                  <span class="mdl-list-item__text__secondary">Secondary text</span>
                </span>
                <span class="mdl-list-item__end-detail grey-bg"></span>
              </li>
            </ul>
          </section>
          <section>
            <h3>Example - Two-line avatar + text + icon</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Photos</span>
                  <span class="mdl-list-item__text__secondary">Jan 9, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Recipes</span>
                  <span class="mdl-list-item__text__secondary">Jan 17, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Work</span>
                  <span class="mdl-list-item__text__secondary">Jan 28, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
            </ul>
          </section>
          <section class="mdl-theme--dark">
            <h3>Example - Two-line avatar + text + icon (Dark)</h3>
            <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Photos</span>
                  <span class="mdl-list-item__text__secondary">Jan 9, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Recipes</span>
                  <span class="mdl-list-item__text__secondary">Jan 17, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                  <i class="material-icons" aria-hidden="true">folder</i>
                </span>
                <span class="mdl-list-item__text">
                  <span class="mdl-list-item__text__primary">Work</span>
                  <span class="mdl-list-item__text__secondary">Jan 28, 2014</span>
                </span>
                <a href="#" class="mdl-list-item__end-detail material-icons"
                   aria-label="View more information" title="More info"
                   onclick="event.preventDefault();">
                  info
                </a>
              </li>
            </ul>
          </section>
        </section>
        <section>
          <h2>List Dividers</h2>
          <section>
            <h3>Full-Width Dividers</h3>
            <ul class="mdl-list">
              <li class="mdl-list-item">Single-line item - section 1</li>
              <li class="mdl-list-item">Single-line item - section 1</li>
              <li class="mdl-list-item">Single-line item - section 1</li>
              <li class="mdl-list-divider" role="separator"></li>
              <li class="mdl-list-item">Single-line item - section 2</li>
              <li class="mdl-list-item">Single-line item - section 2</li>
            </ul>
          </section>
          <section>
            <h3>Inset Dividers</h3>
            <ul class="mdl-list mdl-list--avatar-list">
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item - section 1
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item - section 1
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item - section 1
              </li>
              <li class="mdl-list-divider mdl-list-divider--inset" role="separator"></li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item - section 2
              </li>
              <li class="mdl-list-item">
                <span class="mdl-list-item__start-detail grey-bg"></span>
                Single-line item - section 2
              </li>
            </ul>
          </section>
        </section>
        <section>
          <h2>List Groups</h2>
          <section>
            <h3>Basic Usage</h3>
            <div class="mdl-list-group">
              <h3 class="mdl-list-group__subheader">List 1</h3>
              <ul class="mdl-list">
                <li class="mdl-list-item">Single-line item</li>
                <li class="mdl-list-item">Single-line item</li>
                <li class="mdl-list-item">Single-line item</li>
              </ul>
              <hr class="mdl-list-divider">
              <h3 class="mdl-list-group__subheader">List 2</h3>
              <ul class="mdl-list">
                <li class="mdl-list-item">Single-line item</li>
                <li class="mdl-list-item">Single-line item</li>
                <li class="mdl-list-item">Single-line item</li>
              </ul>
            </div>
          </section>
          <section>
            <h3>Example - Two-line Lists, Avatars, end detail, inset dividers</h3>
            <div class="mdl-list-group">
              <h3 class="mdl-list-group__subheader">Folders</h3>
              <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Photos</span>
                    <span class="mdl-list-item__text__secondary">Jan 9, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Recipes</span>
                    <span class="mdl-list-item__text__secondary">Jan 17, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Work</span>
                    <span class="mdl-list-item__text__secondary">Jan 28, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
              </ul>
              <hr class="mdl-list-divider mdl-list-divider--inset">
              <h3 class="mdl-list-group__subheader">Files</h3>
              <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Vacation Itinerary</span>
                    <span class="mdl-list-item__text__secondary">Jan 10, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Kitchen Remodel</span>
                    <span class="mdl-list-item__text__secondary">Jan 20, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
              </ul>
            </div>
          </section>
          <section class="mdl-theme--dark">
            <h3>Example - Two-line Lists, Avatars, end detail, inset dividers (Dark)</h3>
            <div class="mdl-list-group">
              <h3 class="mdl-list-group__subheader">Folders</h3>
              <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Photos</span>
                    <span class="mdl-list-item__text__secondary">Jan 9, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Recipes</span>
                    <span class="mdl-list-item__text__secondary">Jan 17, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">folder</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Work</span>
                    <span class="mdl-list-item__text__secondary">Jan 28, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
              </ul>
              <hr class="mdl-list-divider mdl-list-divider--inset">
              <h3 class="mdl-list-group__subheader">Files</h3>
              <ul class="mdl-list mdl-list--two-line mdl-list--avatar-list two-line-avatar-text-icon-demo">
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Vacation Itinerary</span>
                    <span class="mdl-list-item__text__secondary">Jan 10, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
                <li class="mdl-list-item">
                  <span class="mdl-list-item__start-detail grey-bg" role="presentation">
                    <i class="material-icons" aria-hidden="true">insert_drive_file</i>
                  </span>
                  <span class="mdl-list-item__text">
                    <span class="mdl-list-item__text__primary">Kitchen Remodel</span>
                    <span class="mdl-list-item__text__secondary">Jan 20, 2014</span>
                  </span>
                  <a href="#" class="mdl-list-item__end-detail material-icons"
                     aria-label="View more information" title="More info"
                     onclick="event.preventDefault();">
                    info
                  </a>
                </li>
              </ul>
            </div>
          </section>
        </section>
      </div>
    </main>
    <script src="/assets/material-design-lite.js"></script>
    <script>
      (function() {
        mdl.Checkbox.attachTo(document.querySelector('.mdl-checkbox'));
        const demoWrapper = document.getElementById('demo-wrapper');
        document.getElementById('toggle-rtl').addEventListener('change', function() {
          if (this.checked) {
            demoWrapper.setAttribute('dir', 'rtl');
          } else {
            demoWrapper.removeAttribute('dir');
          }
        });
      })();
    </script>
  </body>
</html>
